<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="/static/images/login_1.png"></image>
		<image class="img-b" src="/static/images/login_2.png"></image>
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view>
		<view class="t-b2"></view>
		<form class="cl">
			<view class="t-a">
				<image src="/static/images/login_sj.png"></image>
				<view class="line"></view>
				<input type="text" v-model="loginForm.username" placeholder="请输入账号" />
			</view>
			<view class="t-a">
				<image src="/static/images/login_yz.png"></image>
				<view class="line"></view>
				<input password type="text" v-model="loginForm.password" placeholder="请输入密码" />
			</view>
			<view class="forgetPwd">
				<span></span>
			  <span @click="toReg()">没有账号，去注册</span>
			</view>
			<button @tap="login()">登 录</button>
		</form>
		<view class="xieyi text-center">
			<text class="text-grey1">登录即代表同意</text>
			<text class="text-blue">《用户协议》</text>
			<text class="text-blue">《隐私协议》</text>
		</view>
	</view>
</template>
<script>
	import { encrypt, decrypt } from '@/utils/jsencrypt'
		
export default {
	data() {
		return {
			title: '欢迎回来！', //填写logo或者app名称，也可以用：欢迎回来，看您需求
			loginForm: {
				username: "15811089017",
				password: "123456s",
			}
		};
	},
	onLoad() {},
	methods: {
		//当前登录按钮操作
		async login() {
			if (this.loginForm.username === "") {
				uni.showToast({ title: '请输入账号', icon: 'none' });
				return;
			}
			if(this.loginForm.password === ""){
				uni.showToast({ title: '请输入密码', icon: 'none' });
				return;
			}
			// if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.phone)) {
			// 	uni.showToast({ title: '请输入正确手机号', icon: 'none' });
			// 	return;
			// }
			await this.pwdLogin({})
			//....此处省略，这里需要调用后台验证一下验证码是否正确，根据您的需求来
			// uni.showToast({ title: '登录成功！', icon: 'none' });
		},
		
		// 密码登录
		async pwdLogin(captchaParams) {
			this.$modal.loading("登录中，请耐心等待...")
			// 执行登录
			this.loginForm.password = encrypt(this.loginForm.password)
			this.$store.dispatch('Login', this.loginForm).then(() => {
				this.loginForm.password = ''
				this.$modal.closeLoading()
				this.loginSuccess()
			}).catch(() => {
				this.loginForm.password = decrypt(this.loginForm.password)
			})
		},
		// 登录成功后，处理函数
		loginSuccess(result) {
			// 设置用户信息
			this.$store.dispatch('GetInfo').then(res => {
				uni.showToast({ title: '登录成功！', icon: 'none' });
				this.$tab.reLaunch('/pages/work/index')
			})
		},
		toReg() {
			uni.reLaunch({
				url: '/pages/register'
			})
		}
	}
};
</script>
<style>
.img-a {
	position: absolute;
	width: 100%;
	top: -150rpx;
	right: 0;
}
.img-b {
	position: absolute;
	width: 50%;
	bottom: 0;
	left: -50rpx;
	/* margin-bottom: -200rpx; */
}
.t-login {
	width: 650rpx;
	margin: 0 auto;
	font-size: 28rpx;
	color: #000;
}

.t-login button {
	font-size: 28rpx;
	background: #5677fc;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}

.t-login input {
	padding: 0 20rpx 0 120rpx;
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 30rpx;
	background: #f8f7fc;
	border: 1px solid #e9e9e9;
	font-size: 28rpx;
	border-radius: 50rpx;
}

.t-login .t-a {
	position: relative;
	margin-bottom: 10rpx;
}

.t-login .t-a image {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: 40rpx;
	top: 28rpx;
	/* border-right: 2rpx solid #dedede; */
	margin-right: 20rpx;
}
.t-login .t-a .line{
	width: 2rpx;
	height: 40rpx;
	background-color: #dedede;
	position: absolute;
	top: 28rpx;
	left: 98rpx;
}

.t-login .t-b {
	text-align: left;
	font-size: 46rpx;
	color: #000;
	padding: 300rpx 0 30rpx 0;
	font-weight: bold;
}
.t-login .t-b2 {
	text-align: left;
	font-size: 32rpx;
	color: #aaaaaa;
	padding: 0rpx 0 120rpx 0;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	/* width: 250rpx; */
	margin: 50rpx 0;
}

.t-login .t-g {
	float: left;
	width: 50%;
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 200rpx 0 0 0;
	color: #666;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #000;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}

.xieyi {
	color: #333;
	margin-top: 20px;
}

.forgetPwd{
    font-size: 26rpx;
    color: #b5b5b5;
    text-align: end;
    padding:0 0rpx 30rpx 0rpx;
    display: flex;
    justify-content: space-between;
  }
</style>